<template>
	<div>
		<bi-legend :lang-type="langType" @legend-result="onLegend" :option="radarOption.legend"></bi-legend>

		<bi-visual-map
			:lang-type="langType"
			@visual-map-result="onVisualMap"
			:option="radarOption.visualMap"
		></bi-visual-map>
		<bi-tool-tip :lang-type="langType" @tooltip-result="onToolTip" :option="radarOption.tooltip"></bi-tool-tip>
		<bi-radar-indicator :lang-type="langType" @radar-result="onRadar" :option="radarOption.radar"></bi-radar-indicator>
		<bi-radar-series
			:lang-type="langType"
			@series-result="onSeries"
			:series-name="item.name"
			:option="radarOption.series[idx]"
			v-for="(item,idx) in radarOption.series"
			:key="idx"
		></bi-radar-series>

		<div style="text-align:center">
			<md-button
				class="md-raised md-primary"
				@click="createChartOption"
			>{{getLangText(label.createChart)}}</md-button>
		</div>
	</div>
</template>
<script>
	import Legend from "@/components/comp/Legend";
	import VisualMap from "@/components/comp/VisualMap";
	import ToolTip from "@/components/comp/ToolTip";
	import RadarIndicator from "@/components/comp/RadarIndicator";
	import RadarSeries from "@/components/chart/RadarSeries";
	export default {
		name: "RadarOption",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		components: {
			"bi-legend": Legend,
			"bi-visual-map": VisualMap,
			"bi-tool-tip": ToolTip,
			"bi-radar-series": RadarSeries,
			"bi-radar-indicator": RadarIndicator
		},
		data: () => ({
			label: {
				bgColor: { zh: "背景颜色", en: "BgColor" },
				visualMap: { zh: "开启视觉映射", en: "openVisualMap" },
				createChart: { zh: "生成图表", en: "CREATE CHART" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" }
			},
			isShow: false,
			radarOption: {
				tooltip: [],
				legend: [],
				radar: [],
				visualMap: null,
				series: [{}]
			}
		}),
		watch: {
			option() {
				this.parseObj();
			},
			// radarOption:{
            // deep:true,
            // handler(){
            //     this.createChartOption();
            // }
        // }
		},
		methods: {
			onLegend(op) {
				this.radarOption.legend = op;
			},

			onVisualMap(op) {
				this.radarOption.visualMap = op;
			},
			onToolTip(op) {
				this.radarOption.tooltip = op;
            },
            onRadar(op){
                this.radarOption.radar = op;
            },
			onSeries(op) {
				this.radarOption.series[0] = op;
			},

			parseObj() {
				// this.doVisualMap();
				if(!this.option||JSON.stringify(this.option)=='{}')return;
				for (var key in this.option) {
					this.radarOption[key] = this.option[key];
				}
			},
			createChartOption() {
				this.$emit("create-chart", this.radarOption);
			}
		},
		mounted() {
			this.parseObj();
		}
	};
</script>
